<template>
  <div v-show="selectNum" class="select-box">
    <div>
      已选择<span class="len-num">{{ selectNum }}</span> 项
    </div>
    <div class="cancel-text" @click="cancelSelect">取消选择</div>
  </div>
</template>

<script setup lang="ts">
  defineProps({
    selectNum: {
      type: Number,
      default: 0,
    },
  });
  const emit = defineEmits(['cancelSelect']);
  const cancelSelect = () => {
    emit('cancelSelect');
  };
</script>

<style scoped lang="less">
  .select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 40px;
    min-height: 40px;
    background: #ebf4ff;
    padding: 0 16px;
    margin-bottom: 16px;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #99c9ff;
    .len-num {
      color: rgb(var(--primary-5));
      padding: 0 6px;
    }
    .cancel-text {
      color: rgb(var(--primary-5));
      cursor: pointer;
    }
  }
</style>
